﻿(function ($) {
    $.widget("ui.darylcarousel", {
        options: {
            data: {},
            thumbTemplateId: '',
            previewTemplateId : '',
            carouselPreviewId: '',
            carouselThumbsId : '',
            carouselTitleId : ''
        },
        _init: function () {
            var self = this;
        },
        _create:
			function () {
			    var self = this;
			    self.element.append($('#' + self.options.previewTemplateId).render());
			    self.element.append($('#' + self.options.thumbTemplateId).render(self.options.data));

			    self.controls = {
                    carouselPreview: self.element.find('#' + self.options.carouselPreviewId),
                    carouselTitle: self.element.find('#' + self.options.carouselTitleId),
                    carouselThumbs: self.element.find('[id="' + self.options.carouselThumbsId + '"]')
			    }

			    self.showItem(0);

			    self.controls.carouselThumbs.each(function (i, o) {
			        $(o).mouseover(function () {
			            self.showItem(i);
			            $(o).css("background-color", "#FFC40D");
			        });
			        $(o).mouseleave(function () {
			            $(o).css("background-color", "transparent");
			        });
			    });
			},
        destroy: function () {

        },
        _setOption: function (option, value) {
            $.Widget.prototype._setOption.apply(this, arguments);

            var el = this.element;
        },
        showItem: function (i) {
            var self = this,
				data = self.options.data;

            if (data[i] != undefined) {
                self.controls.carouselPreview.find("img").attr('src', data[i].Visuals[0].ActualFile);
            }
        }
    });
})(jQuery);